Ext.onReady(function() {

	var currentTab = Ext.getCmp('modulePanel').getActiveTab();

	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	function change(val) {
		if (val > 0) {
			return '<span style="color:green;">' + val + '</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '</span>';
		}
		return val;
	}

	function pctChange(val) {
		if (val > 0) {
			return '<span style="color:green;">' + val + '%</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '%</span>';
		}
		return val;
	}

	var fields = ['company', {
				name	: 'price',
				type	: 'float'
			}, {
				name	: 'change',
				type	: 'float'
			}, {
				name	: 'pctChange',
				type	: 'float'
			}, {
				name		: 'lastChange',
				type		: 'date',
				dateFormat	: 'Y-m-d'
			}];

	var store = new Ext.data.Store({
				proxy	: new Ext.data.HttpProxy({
							url		: '../../pages/company/data.json',
							method	: 'GET'
						}),
				reader	: new Ext.data.JsonReader({
							root	: 'data',
							fields	: fields
						})
			});

	store.load();

	// create the Grid
	var grid = new Ext.grid.GridPanel({
				region		: 'center',
				margins		: '-1 -1 -1 0',
				store		: store,
				columns		: [{
							header		: 'Company',
							sortable	: true,
							dataIndex	: 'company'
						}, {
							header		: 'Price',
							sortable	: true,
							renderer	: 'usMoney',
							dataIndex	: 'price'
						}, {
							header		: 'Change',
							sortable	: true,
							renderer	: change,
							dataIndex	: 'change'
						}, {
							header		: '% Change',
							sortable	: true,
							renderer	: pctChange,
							dataIndex	: 'pctChange'
						}, {
							header		: 'Last Updated',
							sortable	: true,
							renderer	: Ext.util.Format.dateRenderer('m/d/Y'),
							dataIndex	: 'lastChange'
						}],
				stripeRows	: true,
				viewConfig	: {
					forceFit	: true
				},
				// config options for stateful behavior
				height		: currentTab.getInnerHeight() * .6,
				stateful	: true,
				bbar		: new Ext.PagingToolbar({
							pageSize	: 25,
							store		: store
						}),
				stateId		: 'company'
			}
	);

	var sm = grid.getSelectionModel();
	sm.on({
				'beforerowselect'	: function(_this, rowIdx, keep, rec) {
					/*if (rec.data.change < 0)
						return false;*/

					return true;
				},
				'rowselect'			: function(sm, rowIdx, rec) {
					this.hasNext() ? panel.btnNext.enable() : panel.btnNext
							.disable();
					this.hasPrevious() ? panel.btnPrev.enable() : panel.btnPrev
							.disable();

					form.loadRecord(rec);
				}
			});

	var fp = new Ext.FormPanel({
				frame		: true,
				bodyStyle	: 'padding: 10px',
				style		: 'margin: 5px',
				items		: [{
							layout	: 'column',
							items	: [{
										columnWidth	: .33,
										layout		: 'form',
										defaults	: {
											anchor	: '95%'
										},
										items		: [{
													xtype		: 'ux.displayfield',
													fieldLabel	: 'Company',
													name		: 'company'
												}, {
													xtype		: 'textfield',
													fieldLabel	: 'Price',
													name		: 'price'
												}]
									}, {
										columnWidth	: .33,
										layout		: 'form',
										defaults	: {
											anchor	: '95%'
										},
										items		: [{
													xtype		: 'textfield',
													fieldLabel	: 'Change',
													name		: 'change'
												}, {
													xtype		: 'textfield',
													fieldLabel	: '% Change',
													name		: 'pctChange'
												}]
									}, {
										columnWidth	: .33,
										layout		: 'form',
										defaults	: {
											anchor	: '95%'
										},
										items		: [{
													xtype		: 'datefield',
													fieldLabel	: 'Last Updated',
													name		: 'lastChange'
												}]
									}]
						}],
				buttonAlign	: 'center',
				buttons		: [{
							text	: '保存'
						}, {
							text	: '重置',
							handler	: function() {
								form.reset();
							}
						}]
			}
	)

	var form = fp.getForm();

	var tp = new Ext.tree.TreePanel({
				region			: 'west',
				width			: 250,
				minSize			: 250,
				maxSize			: 250,
				lines			: false,
				useArrows		: true,
				autoScroll		: true,
				containerScroll	: true,
				split			: true,
				collapsible		: true,
				margins			: '-1 0 -1 -1',
				dataUrl			: './tree.json',
				root			: {
					nodeType	: 'async',
					text		: '企业应用平台'
				}
			});

	var panel = new Ext.Panel({
				region		: 'south',
				autoScroll	: true,
				collapsible	: true,
				split		: true,
				margins		: '0 -1 -1 -1',
				height		: currentTab.getInnerHeight() * .4,
				items		: fp,
				tbar		: [{
							text		: '上一页',
							ref			: '../btnPrev',
							disabled	: true,
							iconCls		: 'x-tbar-page-prev',
							handler		: function() {
								sm.selectPrevious();
							}
						}, '->', {
							text		: '下一页',
							ref			: '../btnNext',
							disabled	: true,
							iconCls		: 'x-tbar-page-next',
							handler		: function() {
								sm.selectNext();
							}
						}]
			});

	panel.on({
				'collapse'	: function() {},
				'expand'	: function() {}
			});

	new Ext.Panel({
				id			: 'p-company',
				renderTo	: 'company',
				layout		: 'border',
				border		: false,
				height		: currentTab.getInnerHeight(),
				items		: [tp, grid, panel]
			});

}
);